<!-- 
  @name: 添加车辆
  @date: 2020.1.8
 -->
<template>
	<view class="content">
		<!-- 输入框 -->
		<view class="input">
			<view class="item-1 line">
				<text class="tip">车牌号码</text>
				<view class="right">
					<input
						class="int"
						placeholder="输入车牌"
						placeholder-class="phcolor"
						v-model="carNumber"
					/>
				</view>
			</view>
			
			<view class="item-2">
				<text class="tip">车辆归属</text>
				<view class="right">
					<view
						class="type"
						v-for="(item, index) in typeList"
						:key="index"
						@tap="changeType(item, index)">
						<view class="_radio" :class="carBelong === item.id ? '_rd1' : '_rd2'"></view>
						<text class="text" :class="carBelong === item.id ? 't1' : ''">{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<button class="btn_submit" @tap="submit">确定</button>
		
		<!-- 登录提示 -->
		<sign-in></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [
					{ id: 0, text: '个人' },
					{ id: 1, text: '车队' }
				],
				carNumber: '',  //车牌号
				carBelong: 0,  //车辆归属id
				carOwner: '个人',  //车辆归属文字
			}
		},
		onLoad() {
			
		},
		methods: {
			//更换选项
			changeType(item, index) {
				this.carBelong = item.id;
				this.carOwner = item.text;
			},
			//确定提交
			submit() {
				if(!this.carNumber) {
					this.$showToast('请填写车牌号');
					return;
				}
				this.$http({
					url: this.$api.userUrl + 'doeditusercar',
					data: {
						action: 0,
						carNumber: this.carNumber,
						carOwner: this.carOwner
					}
				}).then(res => {
					this.$successToast('添加成功');
					setTimeout(() => {
						uni.$emit('userCar_addCar', {});
					}, this.$tmp.TIME_SUC);
					this.$sucBack();
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 输入框 */
	.input {
		width: 750rpx;
		margin-top: $spacing-col;
		padding: 0 30rpx;
		background-color: $color-white;
		.tip {
			font-weight: 500;
			font-size: 30rpx;
		}
		.text {
			font-size: 30rpx;
		}
		.item-1,
		.item-2 {
			width: 100%;
			padding: 40rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.item-1 {
			border-bottom: 1rpx solid $color-list;
			.right {
				flex: 1;
				text-align: right;
				.int {
					margin-left: 30rpx;
				}
			}
		}
		.item-2 {
			.tip {
				flex: 1;
			}
			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				
				._radio {
					margin-top: 2rpx;
				}
				.type {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 33rpx;
					
					.text {
						margin-left: 20rpx;
						color: $color-grey;
					}
					.text.t1 {
						color: $color-text-primary;
					}
				}
			}
		}
	}
	
	/* 按钮 */
	.btn_submit {
		margin-top: 442rpx;
	}
</style>
